<template>
    <div class="container">
        <h1 class="tip">确认挂号信息</h1>
        <!--展示就诊人信息卡片-->
        <el-card style="margin: 20px 0">
            <!--头部插槽-->
            <template #header>
                <div class="card-header">
                    <span>请选择就诊人</span>
                    <el-button type="primary" size="default" :icon="User">添加就诊人</el-button>
                </div>
            </template>
            <!--卡片中间就诊人信息-->
            <div class="user">
                <Visitor @click="changeIndex(index)" v-for="(user,index) in userArr" :key="user.id" class="item" :user="user" :index="index" :userIndex="userIndex"/>
            </div>
        </el-card>
        <!--展示医生信息卡片-->
        <el-card>
            <template #header>
                <div class="card-header">
                    <span>挂号信息</span>
                </div>
            </template>
            <el-descriptions
                class="margin-top"
                :column="2"
                border
            >
                <el-descriptions-item>
                    <template #label>
                        <div class="cell-item">
                            就诊日期
                        </div>
                    </template>
                    {{ doctorInfo.workDate }}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template #label>
                        <div class="cell-item">
                            就诊医院
                        </div>
                    </template>
                    {{ doctorInfo.param?.hosname }}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template #label>
                        <div class="cell-item">
                            就诊科室
                        </div>
                    </template>
                    {{ doctorInfo.param?.depname }}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template #label>
                        <div class="cell-item">
                            医生姓名
                        </div>
                    </template>
                    {{ doctorInfo.docname }}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template #label>
                        <div class="cell-item">
                            医生职称
                        </div>
                    </template>
                    {{ doctorInfo.title }}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template #label>
                        <div class="cell-item">
                            医生专长
                        </div>
                    </template>
                    {{ doctorInfo.skill }}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template #label>
                        <div class="cell-item">
                            价格
                        </div>
                    </template>
                    <div class="price">{{ doctorInfo.amount }}元</div>
                </el-descriptions-item>
            </el-descriptions>

        </el-card>
        <!-- 底部按钮 -->
        <div class="btn">
            <el-button type="primary" size="default" :disabled="userIndex===-1" @click="submitOrder">确定挂号</el-button>
        </div>
    </div>
</template>

<script setup lang="ts" name="Register_step2">
    import {User} from "@element-plus/icons-vue";
    // 引入获取就诊人信息接口
    import {reqGetUser,reqDoctorInfo} from "@/api/hospital";
    import {reqOrder} from "@/api/user";
    import {onMounted,ref} from "vue";
    import type {UserResponseData,UserArr,DoctorInfo} from "@/api/hospital/type";
    import type {OrderIdResponseData} from "@/api/user/type";
    import {useRoute,useRouter} from "vue-router";
    import {ElMessage} from "element-plus";

    const $route = useRoute();
    const $router = useRouter();

    // 存储所有的就诊人数组
    let userArr = ref<UserArr>([])
    // 存储挂号医生数据
    let doctorInfo = ref<any>({})
    // 保存用户选择就诊人的索引值
    let userIndex = ref<number>(-1)

    // 组件挂载完毕获取数据
    onMounted(()=>{
        fetchUserData();
        fetchDoctor();
    });
    const fetchUserData=async ()=>{
        let result:UserResponseData = await reqGetUser()
        if(result.code === 200){
            userArr.value = result.data
        }
    }
    const fetchDoctor=async ()=>{
        let result:DoctorInfo = await reqDoctorInfo(<string>$route.query.docId)
        doctorInfo.value = result.data
    }

    // 获得用户选择的就诊人索引
    const changeIndex=(index:number)=>{
        userIndex.value = index;
    }

    // 点击确定挂号按钮
    const submitOrder= async ()=>{
        // 医院编号
        let hoscode = doctorInfo.value.hoscode;
        // 医生id
        let docId = doctorInfo.value.id;
        // 就诊人id
        let patientId = userArr.value[userIndex.value].id;
        let result:OrderIdResponseData =await reqOrder(hoscode,docId,patientId);
        if(result.code === 200){
            await $router.push({path:'/user/order',query:{orderId:result.data}})
        }else{
            ElMessage({
                message: result.message,
                type: 'error'
            })
        }
    }
</script>

<style scoped>
.container {
    width: 100%;
    height: 100%;
    margin: 30px;
}

.tip {
    color: #7f7f7f;
    font-weight: 900;
    font-size: 20px;
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.user {
    display: flex;
    flex-wrap: wrap;
    .item {
        width: 30%;
        margin: 10px;
    }
}
.btn{
    margin-top: 20px;
    display: flex;
    justify-content: center;
}
.price{
    color: red;
}
</style>